import type { Meta, StoryObj } from '@storybook/react-vite';
import { MikuAlert } from './MikuAlert';
import { QqOutlined } from '@ant-design/icons';

const meta = {
  title: 'Example/MikuAlert',
  component: MikuAlert,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {
    message: {
      description: '提示框标题',
      type: { name: 'string', required: true },
    },
    description: {
      description: '提示框描述',
      type: { name: 'string', required: false },
    },
    type: {
      description: '提示框类型',
      options: ['info', 'success', 'warning', 'error'],
      type: { name: 'string', required: false }
    },
    closable: {
      description: '是否显示关闭按钮',
      type: { name: 'boolean', required: false },
    },
    effects: {
      description: '特效开关'
    }
  }
} satisfies Meta<typeof MikuAlert>;

export default meta;
type Story = StoryObj<typeof meta>;

// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
export const Primary: Story = {
  parameters: {
    docs: {
      description: {
        story: '这是MikuAlert组件的基础使用方式，通过设置message、description、type属性来控制提示框的显示效果。'
      },
      source: {
        code: `
          <>
            <MikuAlert 
              message={<div><QqOutlined /> -v- 初音未来提示</div>}
              description="这是一个初音风格的提示框" 
            />
            <MikuAlert 
              message=" -v- 初音未来提示1" 
              description="初音未来的新专辑已发布" 
              closable={true}
              effects={{ glow: true, pulse: true, hover: true }}
              // pluse优先级比hover高，会覆盖hover效果
            />
            <MikuAlert 
              message=" -v- 初音未来提示2" 
              type="error"
              effects={{ glow: false, hover: true }}
            />
            <MikuAlert 
              message=" -v- 初音未来提示3" 
              type="warning"
              effects={{ glow: false, hover: true, shine: true }}
            />
          </>
        `
      }
    },
  },
  render: () => (
    <>
      <MikuAlert
        message={<div><QqOutlined /> -v- 初音未来提示</div>}
        description="这是一个初音风格的提示框"
      />
      <MikuAlert
        message=" -v- 初音未来提示1"
        description="初音未来的新专辑已发布"
        closable={true}
        effects={{ glow: true, pulse: true, hover: true }}
      // pluse优先级比hover高，会覆盖hover效果
      />
      <MikuAlert
        message=" -v- 初音未来提示2"
        type="error"
        effects={{ glow: false, hover: true }}
      />
      <MikuAlert
        message=" -v- 初音未来提示3"
        type="warning"
        effects={{ glow: false, hover: true, shine: true }}
      />
    </>
  ),
};